<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue'
import jwt_decode from "jwt-decode";

const balance = ref("9999999.99")

let token = jwt_decode(localStorage.getItem("token"))
if (token == null) {
    token = jwt_decode(localStorage.getItem("longToken"))
}


onMounted(() => {
    axios.get("http://192.168.110.221:8080/user/findByIdController", {
        params: {
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
        }
    }).then((resp)=>{
        if(resp.data.code==200){
            balance.value = resp.data.datas.balance
        }
        // console.log(resp);
    })
})

</script>
<template>
    <div class="right" @click="$emit('change', bao)">
        <i class="iconfont icon-qianbao right-1"></i>
        <div class="buttom">钱包</div>
        <div class="buttom-1">￥{{ balance }}</div>
    </div>
</template>
<style>
.right {
    margin-top: 5px;
    height: 60px;
    width: 40px;
    position: relative;
}

.right-1 {
    margin-top: 10px;
    font-size: 25px;
    color: aliceblue;
}

.buttom {
    margin-left: -9px;
    font-size: 16px;
    color: aliceblue;
    text-align: center;
}

.buttom-1 {
    position: absolute;
    font-size: 14px;
    width: 100px;
    color: aliceblue;
    text-align: center;
    top: 45px;
    left: -36px;
}
</style>